블로그_13_rootscan 페이지 대규모 개선

Study Tree랑 디자인 맞추기

기존 rootscan 소개 페이지가 그다지 마음에 들진 않아서,
리액트의 디자인이나 애니메이션 코드를 다루는 연습을 할 겸 대폭 개선을 시작했다.
AI의 도움을 받더라도 이것저것 고치면서 하느라 이틀 정도 걸렸다....

Study Tree 페이지에서 사용한 Bento Grid 레이아웃을 rootscan 페이지에도 동일하게 적용했다. 전체적인 사이트의 디자인 톤앤매너를 맞추는 목적이 컸다.

계속 고민이 좀 있었는데, "웹 기능도 아니고 로컬에서 돌아가는 CLI 도구를 어떻게 웹에서 매력적으로 보여줄 것인가?" 하는 점이었다.

1. 터미널 패널

가장 먼저 떠오른 건 터미널 패널이었다. 실제 CLI를 흉내내듯 커맨드를 입력하고 결과가 출력되는 흐름을 보여주면 되겠다 싶었다.
툴의 가장 중요한 결과물인 보고서와 패치 파일을 보여주는 것도 필요했기에
처음에는 터미널 패널과 보고서 패널을 Study Tree 페이지처럼 2열 레이아웃으로 표시하려 했다.

그러나 공간이 너무 비어 보이고, rootscan이 패치 파일도 제공하는데
이 패치 파일의 diff 내용도 보여주면 좋을 것 같아 최종적으로 3열 레이아웃으로 결정했다.

• 좌측(Terminal): 실시간 스캔 과정과 표시
• 중앙(Report): 분석된 취약점 리포트 미리보기
• 우측(Patch): 자동 생성된 패치 코드 미리보기

이렇게 터미널(실행) → 리포트(진단) → 패치(해결)로 이어지는 흐름을 한 화면에 구성했다.

비교적 간단했기 때문에 구현에 오랜 시간이 걸리지는 않았고,
내용과 텍스트가 많다 보니 반응형 레이아웃을 어떻게 할지 고민하고 수정하는 시간이 더 길었다.

또한, 툴 소개와 같은 카드를 넣고 싶었는데 보고서, 패치로 인한 정보량 과다 문제와
마땅히 넣을만한 공간이 없었다는 점 때문에 이런 세부적인 내용은 터미널의 탭으로 넣자는 아이디어를 떠올렸다.

2. 3D 파이프라인 시각화

처음엔 아키텍쳐를 간단한 플로우차트로 만들려다가 욕심이 조금 생겼다.
레퍼런스를 찾다 보니 AWS의 아키텍쳐 이미지가 마음에 들어서, 비슷하게 아이소메트릭을 구현해보려 했다.

개별 객체를 일러스트레이터 등으로 디자인해서 넣어야 하나? 싶었다가,
AI를 써서 SVG로 간단히 구현하는게 낫겠다 싶었다.

물론 말을 잘 못알아들어서 여러 차례 삽질을 했다.
오브젝트를 배치하고, 데이터 입자가 플로우되는 애니메이션을 넣고 꾸몄다.

터미널과 톤을 같이 가져가려고 정보성 텍스트도 비슷하게 꾸몄다.
다만 레이아웃 문제로 반응형에서 화면이 줄어들 때 여백 등이 조금 마음에 안 들지만,
이건 나중에 수정해보기로 했다.

3. 퍼포먼스 탭

파이프라인 시각화 이후 조금 지쳐서 이대로 그만둘까 싶었는데, 뭔가 탭이 두 개인 것이 허전해서 세 번째 탭을 구현해보기로 했다. 뭘 넣지 고민하다가.... rootscan이 단순한 Wrapping 툴이 아니라 기존 도구보다 얼마나 빠르고 효율적인지를 보여주면 좋겠다고 생각이 들었다.

두 개의 파이프라인을 나란히 두고, 실제 데이터가 처리되는 과정을 애니메이션으로 보여주기로 했다.
앞의 파이프라인 시각화와 비슷하지만 다른 느낌으로, 카드를 통과하는 느낌으로 구현하려 했는데,
뭔가 100% 마음에 들지는 않지만 그래도 의도한 바는 잘 만들어진 것 같다.

작은 내부 터미널도 구현했는데
기존에 세 가지 엔진을 순차적으로 쓸 때는 병목이 있으며, 명령어도 세 번 입력해야 하는 등의 불편함을 표현하려 했고, rootscan을 쓰면 이런 레거시 대비 얼마나 빨리 처리되는지 표현하려고 했다.

이렇게 시각적으로 비교해주면 굳이 긴 설명 없이도 "아, 빠르구나"를 바로 납득시킬 수 있을 거라고 생각했다.

4. 다음 개선 사항

추후 프로그램에 기능이 개선되거나 하면 별도의 탭으로 확장시키면 될 것 같다.
마찬가지로 애니메이션을 적극 활용해보는게 좋겠다. 생각보다 재밌다.